<template>
  <div class="listComponents">
    <van-popup
      class="popup"
      v-model="ListComponentsShow"
      @closeable="closeListComponents"
    >
      <canvas
        id="canvas"
        width="115"
        height="120"
        style="display:none"
      ></canvas>
      <van-pull-refresh
        v-model="refreshing"
        pulling-text=""
        @refresh="onRefresh"
      >
        <van-nav-bar
          left-text="歌单标签"
          @click-left="closeListComponents"
          left-arrow
          :border="false"
        >
          <template #right>
            <van-icon name="service-o" size="18" />
          </template>
        </van-nav-bar>
        <van-row
          type="flex"
          align="center"
          justify="center"
          style="height: 270px;margin-bottom: -25px; "
          v-if="mode"
        >
          <van-col span="10" type="flex" justify="center" align="center">
            <img
              loading
              v-lazy="playlist.coverImgUrl"
              alt=""
              style="width: 115px; height: 120px; border-radius:10px"
              crossOrigin="anonymous"
            />
          </van-col>
          <van-col span="14" style="padding-right:10px;">
            <div class="imgFontStyle">
              {{ playlist.name }}
            </div>
            <div class="motto" style="padding-top: 30px;">
              {{ playlist.description }}
            </div>
          </van-col>
        </van-row>
        <van-row
          type="flex"
          align="center"
          justify="center"
          style="height: 270px;margin-bottom: -25px; "
          v-else
        >
          <div
            style="color: white;
    font-size: 44px;
    font-family: cursive;
    margin-top: 120px;"
          >
            {{ playlist.name }}<br />
            <div style="font-size:24px;text-align:center;margin: 0 auto;">
              {{ playlist.updateFrequency }}
            </div>
          </div>
          <!-- <van-row>
            {{ playlist.updateFrequency }}
          </van-row> -->
        </van-row>
        <van-sticky>
          <van-row>
            <div class="iconContent">
              <van-icon name="add-o" color="black">
                {{ playlist.subscribedCount | fontFormat }}</van-icon
              >
              <van-icon name="chat-o" color="black" style="">{{
                playlist.commentCount | fontFormat
              }}</van-icon>
              <van-icon name="share-o" color="black">
                {{ playlist.shareCount | fontFormat }}
              </van-icon>
            </div>
          </van-row>
          <van-row
            style="background-color: #fff; border-top-left-radius:10px; border-top-right-radius:20px; margin-top:30px;"
          >
            <van-col
              span="17"
              style="font-size: 16px; line-height:50px; border-top-right-radius:20px;padding-left:20px;"
            >
              播放全部<span>({{ playlist.trackCount }})</span>
            </van-col>
            <van-col
              span="7"
              type="flex"
              justify="center"
              align="center"
              style="line-height:50px; height:50px"
            >
              <van-icon name="down" size="24" color="black" />
              &nbsp;&nbsp;&nbsp;
              <van-icon name="certificate" size="24" color="black" />
            </van-col>
          </van-row>
        </van-sticky>
        <div style="background:white;">
          <van-list v-model="loading" :finished="finished" @load="onLoad">
          <van-cell
            v-for="(item, index) in CurrentDate"
            :key="item.id"
            :label="item.ar[0].name"
            @click="sing(item.id)"
          >
            <template #title>
              <span :class="{ fontRed: index < 3 }">{{ index + 1 }}</span>
              &nbsp;&nbsp;&nbsp;
              <span>{{ item.name }}</span>
            </template>
            <template #right-icon>
              <van-icon class="ellipsis" name="ellipsis" />
            </template>
          </van-cell>
        </van-list>

        </div>
      </van-pull-refresh>
    </van-popup>
  </div>
</template>

<script>
import { getDetail } from '@/api/ListComponents'
export default {
  name: 'ListComponents',
  data () {
    return {
      playlist: {},
      loading: false,
      finished: false,
      refreshing: false,
      mode: false,
      CurrentDate: {}
    }
  },
  props: {
    ListComponentsShow: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number
    }
  },
  watch: {
    id: async function (val) {
      console.log(val)
      const { playlist } = await getDetail({ id: val })
      console.log(playlist)
      this.playlist = playlist
      this.CurrentDate = playlist.tracks
      console.log(playlist.backgroundCoverUrl)
      if (!playlist.backgroundCoverUrl) {
        const img = new Image()
        const canvas = document.getElementById('canvas')
        console.log('图片路径' + playlist.coverImgUrl)
        const ctx = canvas.getContext('2d')
        img.src = playlist.coverImgUrl
        img.crossOrigin = 'anonymous'
        const that = this
        img.onload = function () {
          ctx.drawImage(img, 0, 0)
          const imgData = ctx.getImageData(0, 0, img.width, img.height).data
          if (imgData[0] + imgData[1] + imgData[2] < 720) {
            document.querySelector(
              '.popup'
            ).style.background = `rgba(${imgData[0]},${imgData[1]},${imgData[2]},${imgData[3]})`
          } else {
            document.querySelector('.popup').style.background = 'black'
          }

          that.mode = true
        }
      } else {
        const reg = /\[.*\]/
        const reuslt = playlist.name.match(reg)[0].substr(1)
        playlist.name = reuslt.slice(0, reuslt.length - 1)

        document.querySelector(
          '.popup'
        ).style.background = `url(${playlist.backgroundCoverUrl}) no-repeat`
        document.querySelector('.popup').style.backgroundSize = '100%'
        document.querySelector('.popup').style.backgroundPosition = '0px -20%'
        this.mode = false
      }
    }
  },
  created () {},
  mounted () {},
  filters: {
    fontFormat: function (value) {
      if (parseInt(value) < 10000) {
        return value
      } else {
        return parseInt(parseInt(value) / 10000) + '万'
      }
    } /* ,
    getTitle: function (value) {
      const reg = /\[.*\]/
      console.log(value)
      return value.match(reg)
    } */
  },
  methods: {
    onRefresh () {
      console.log('触发下拉刷新')
    },
    onLoad () {
      this.finished = true
    },
    closeListComponents () {
      console.log('关闭')
      // this.CurrentDate = {}
      this.$emit('update:ListComponentsShow', false)
    },
    sing (id) {
      this.$router.push('play' + id)
    }
  }
}
</script>

<style scoped lang="less">
.listComponents {
  .popup {
    height: 100%;
    width: 100%;
    z-index: 2004;
    border: 0px;
    /deep/.van-nav-bar {
      background-color: rgba(0, 0, 0, 0);
    }
    /deep/.van-nav-bar__text {
      color: white;
      line-height: normal !important;
    }
    /deep/.van-icon {
      color: white;
      vertical-align: middle;
      font-size: 28px;
    }
    /deep/.imgFontStyle {
      // margin-top: -120px;
      color: white;
      font-size: 32px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .fontRed {
      color: red;
    }
    .motto {
      color: white;
      font-size: 16px;
      text-overflow: ellipsis;
      overflow-x: hidden;
      white-space: nowrap;
    }
    .iconContent {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgb(253, 253, 253);
      width: 500px;
      border-radius: 40px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 80px;
      line-height: 80px;
      box-shadow: 2px 2px 5px #333;
    }
  }
}
</style>
